body{
    margin: 0;
    padding: 0;
    background-color: #F4F4F4;
    text-decoration: none;
    a{
        text-decoration: none;
    }
    input{
        outline: none;
    }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"] {
    -moz-appearance: textfield;
}
$landcolor: #5a5e66;
$bluecolor: #1890FF;
.shop{
    cursor: not-allowed;
}
#top{
    width: 100%;
    height: 5vh;
    position: fixed;
    right: 0;
    z-index: 2;
    background-color: rgb(188, 238, 235);
    border-bottom:solid 2px $bluecolor;
    box-shadow: rgb(136, 136, 136) 0px 1px 3px;
    a{
        font-weight: 500;
        font-size: 16px;
        line-height: 35px;
        color: white;
        &:hover{
            color:$bluecolor;
        }
    }
    .page-icon{
        margin: 0 6px 0 20px;
        height: 16px;
        height: 16px;
    }
    .top_land{
        top: 0;
        font-weight: 500;
        font-size: 18px;
        right: 40px;
        position: absolute;
        &:hover{
            color:$bluecolor;
        }
    }
    .get_message{
        @extend .top_land;
    }
    #myPopup{
        height: 20px;
        transition: .3s;
        width: 100px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 10;
        right: 5px;
        top: 5vh;
        opacity: 0;
    }
}
#body{
    position: relative;
    top: 5vh;
    .column{
        position: fixed;
        padding-top: 40px;
        z-index: 100;
        width: 15%;
        height: 95vh;
        background-color: #5380b8;
        transition: .3s;
        #smaller{
            position: absolute;
            z-index: 1000;
            top: 5px;
           right: 15px;
            color: white;
            font-size: 20px;
            &:hover{
              color: rgb(77, 77, 241);
            }
        }        
        .column_a{
            line-height: 20px;
            text-decoration: none;
            color: #F4F4F4;
            display: flex;
            justify-content: center;
            width: 100%;
            padding:10px 0;
            height: 20px;
            margin-bottom: 20px;
            &:hover{
               color: rgba(0, 0, 255, 0.5);
              }
            font: {
                size: 16px;
                weight: 500;
              }  
            &:hover{
                background-color: $bluecolor;
            }
            i{
                padding:0px 5px;
            }
            span{
                display: block;
            }
        }
        .column_top{
            height: 60px;
            line-height: 60px;
            font: {
                size: 18px;
                weight: 500;
              }  
              color: #032d61;
            &:hover{
                background-color: #5380b8;
            }
        }    
    }
}
.function{
    padding-left: 15%;
    width: 85%;
    background-color: white;
    height: 95vh;
    transition:.3s;
    overflow: auto;
}
#me{
    width: 95%;
    padding:50px 20px;
    overflow: hidden;
    .me-show{
        display: float;
        float: left;
        width: 30%;
        padding: 15px;
        height: 50%;
        background-color: white;
        border-radius: 4px;
        box-shadow: rgb(177, 174, 174) 0px 0px 6px;
            img{
                width: 20%;
                height: 20%;
                border-radius: 100px;
                margin-left: 40%;
                margin-bottom: 5px;
                box-shadow: rgb(179, 179, 179) 0px 0px 6px;
            }
            div{
                width: 100%;
                font-size: 15px;
                border-bottom: rgb(199, 197, 197) 1px solid;
                padding-bottom: 5px;
                margin-bottom: 5px;
                position: relative;
                i{
                    color: $bluecolor;
                    padding: 0 5px;
                }
            }
            #ms-top{
                text-align: center;
                font-size: 20px;
                font-weight: 500;
            }
            span{
                position: absolute;
                right: 10px;
                color:#606266; 
            }
    }
    .me_revise{
        margin-left: 3%;
        width: 55%;
        height: 60%;
        background-color: white;
        border-radius: 4px;
        box-shadow: rgb(177, 174, 174) 0px 0px 6px;
        padding: 15px;
        display: float;
        float: left;
        #mr-top{
            font-size: 20px;
            font-weight: 500;
            border-bottom: rgb(206, 205, 205) 1px solid;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }
        .mr_b{
            height: 40px;
            padding: 5px;
            display: flex;
            line-height: 40px;
            span{
                width: 80px;
                height: 40px;
                line-height: 40px;
                display: block;
                font-size: 15px;
                font-weight: 600;
                color: #515255;
            }
            .mr_input{
                height: 24px;
                width: 80%;
                padding: 6px 12px;
                font-size: 15px;
                color: #7d7f85;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            .sex{
                width: 15px;
                margin-left: 20px;
                height: 38px;
            }
        }
        @mixin but {
            padding: 7px 20px;
            font-size: 14px;
            border-radius: 3px;
            border: none;
            cursor: pointer;
            color: #fff;
        }
        button{
            margin: 10px 0 0 80px;
            background-color: $bluecolor;
            @include but;
        }
        #mr_b{
            background-color:$bluecolor;
            &:hover{
                background-color:rgb(51, 51, 247);
            }
        }
        #end_land{
            margin: 10px 0 0 50px;
            background-color: rgb(255, 79, 79);
            &:hover{
                background-color:rgb(207, 11, 11);
            }
            @include but;
        }
    }
}
#begin{
    width: 100%;
    height:100%;
    background-color: white;
    text-align: center;
    line-height: 400px;
    color: white;
    background-image:url("../img/aaa.jpeg") ;
    font: {
        size: 35px;
        weight: 500;
      }  
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.fades{
    animation:fade .8s;
	-webkit-animation:fade .8s;
}
@keyframes fade
{
	from {opacity: 0} 
  to {opacity: 1}
}
@-webkit-keyframes fade
{
	from {opacity: 0} 
  to {opacity: 1}
}
#team{
    width: 95%;
    background-color: white;
    padding-top: 25px;
    .team_top{
        width: 100%;
        padding:15px 25px;
        height: 40px;
        display: flex;
        top: 5vh;
        position: fixed;
        background-color: white;
        border-bottom: solid 2px #1890FF;
        i{
            padding-right: 5px;
        }
        button{
            padding: 7px 14px;
            font-size: 15px;
            cursor: pointer;
            margin-right:10px;
            border-radius: 5px;
            &:hover{
                color: white;
            }
        }
        #team_add{
            background-color: #E8F4FF;
            color:$bluecolor;
            border: #c3e0fc 1px solid;
            &:hover{
            background-color: $bluecolor;
            color:#E8F4FF;
            }
        }
        #team_delete{
            opacity: .8;
            background-color: #FFEDED;
            color:#ec4c4c;
            border: #e9a4a4 1px solid;
            &:hover{
            background-color: #ec4c4c;
            color:white;
            }
        }
        div{
            border-radius: 15px;
            width: 400px;
            height:40px;
            display: flex;
            input{
                width: 280px;
                border-radius:10px 0px 0px 10px;
                border: 1px solid #1682e6;
                padding-left: 10px;
            }
            a{
                border-radius:0 10px 10px 0;
                display: block;
                height: 24px;
                color: white;
                background-color: $bluecolor;
                padding: 8px 12px;
            }
        }
    }
    .team_main{
        margin-top: 50px;
        margin-left: 25px;
        width: 100%;
        font-size: 15px;
        tr{
            padding: 10px;
            width: 98%;
            height: 20px;
            display: flex;
            border-bottom:1px #DFE6EC solid;
            &:hover{
                background-color: #e8eaf0;
            }
        }
        .tmt{
            background-color: #F8F8F9;
            &:hover{
                background-color: #F8F8F9;
            }
        }
        .ms{
            width: 15%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ml{
            width: 20%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        th{
            color: gray;
            width:20%;
        }
        td{
            text-align: center;
            width: 0px;
            color: rgb(155, 155, 155);
            a{
                color: #63a5f7;
                &:hover{
                    color: #0771f3;
                }
                i{
                    padding: 0 3px;
                }
            }
        }
        input{
            width: 50px;
        }
    }
    .team_b{
        color: rgb(92, 90, 90);
        margin-top:10px ;
        width: 900px;
        display: flex;
        flex-direction:row-reverse;
        font-size: 15px;
        span{
            line-height: 30px;
        }
        a{
            width: 30px;
            height: 30px;
            display: block;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            color: #77787c;
            margin: 0 10px;
            background-color: gainsboro;
            &:hover{
                background-color:$bluecolor;
                color: white;
            }
            span{
                margin: 0 10px;
                display: block;
            };
            input{
                border: 1px #DFE6EC solid;
                border-radius: 5px;
            };
        }
    }
    .team_fade{
        position: fixed;
        z-index: 99;
        background-color: white;
        box-shadow: rgb(177, 174, 174) 0px 0px 8px;
        left: 35%;
        width: 350px;
        height: 250px;
        top:-500px;
        padding:20px 40px;
        border-radius: 5px;
        transition: .5s;
        input{
            margin-bottom: 8px;
            width: 100%;
            height: 30px;
            border: none;
            outline: none;
            border-bottom:gainsboro solid 1px ;
            font-size: 13px;
        }
        .fade{
            width: 20px;
            height: 20px;
            background-color: whitesmoke;
            position: absolute;
            top: 0px;
            text-align: center;
            border-radius: 100px;
            color: gray;
            right: 30px;
            &:hover{
                color: white;
                background-color: rgb(73, 72, 72);
            }
        }
        #passcode_number{
            margin: 0 0 0 10px;
            width: 26%;
            height: 30px;
            font-size: 12px;
        }
        #register_mail{
            width: 70%;
        }
        button{
            margin-top: 20px;
            width: 100%;
            border-radius: 5px;
            color: white;
            font-size: 17px;
            height: 40px;
            border: none;
            cursor: pointer;
            background-color: hsl(209, 78%, 66%);
            &:hover{
                background-color:hsl(209, 93%, 58%) ;
            }
        }
    }
}
#team_revise{
    #input_land{
        margin-top: 20px;
        color: $landcolor;
        font: {
            size:14px;
            weight: 500;
        };
        .team_reivse_input{
            width: 250px;
        }
        .team_sex{
            margin-top: 15px;
            width: 15px;
            height: 15px;
        }
    }
}
#food_revise{
    #input_land{
        margin-top: 20px;
        color: $landcolor;
        font: {
            size:14px;
            weight: 500;
        };
        .food_reivse_input{
            width: 260px;
        }
        .food_sex{
            margin-top: 15px;
            width: 15px;
            height: 15px;
        }
    }
}
#food_add{
    #input_land{
        margin-top: 20px;
        color: $landcolor;
        font: {
            size:14px;
            weight: 500;
        };
        .food_add_input{
            width: 260px;
        }
        .food_add_type{
            margin-top: 15px;
            width: 15px;
            height: 15px;
        }
    }
}
#food{
    width: 95%;
    background-color: white;
    padding-top: 25px;
    .food_top{
        width: 100%;
        height: 40px;
        padding:15px 25px;
        display: flex;
        position: fixed;
        top: 5vh;
        background-color: white;
        border-bottom: solid 2px #1890FF;
        i{
            padding-right: 5px;
        }
        button{
            padding: 7px 14px;
            font-size: 15px;
            cursor: pointer;
            margin-right:10px;
            border-radius: 5px;
            &:hover{
                color: white;
            }
        }
        #food_addf{
            background-color: #E8F4FF;
            color:$bluecolor;
            border: #c3e0fc 1px solid;
            &:hover{
            background-color: $bluecolor;
            color:#E8F4FF;
            }
        }
        #food_delete{
            opacity: .8;
            background-color: #FFEDED;
            color:#ec4c4c;
            border: #e9a4a4 1px solid;
            &:hover{
            background-color: #ec4c4c;
            color:white;
            }
        }
        div{
            border-radius: 15px;
            width: 400px;
            height:40px;
            display: flex;
            input{
                width: 280px;
                border-radius:10px 0px 0px 10px;
                border: 1px solid #1682e6;
                padding-left: 10px;
            }
            a{
                border-radius:0 10px 10px 0;
                display: block;
                height: 24px;
                color: white;
                background-color: $bluecolor;
                padding: 8px 12px;
            }
        }
    }
    .food_main{
        margin-top: 50px;
        margin-left: 25px;
        width: 98%;
        font-size: 15px;
        tr{
            padding: 10px;
            width: 98%;
            height: 20px;
            display: flex;
            border-bottom:1px #DFE6EC solid;
            &:hover{
                background-color: #e8eaf0;
            }
        }
        .ftmt{
            background-color: #F8F8F9;
            &:hover{
                background-color: #F8F8F9;
            }
        }
        .fms{
            width: 15%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .fml{
            width: 20%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        th{
            color: gray;
            width:20%;
        }
        td{
            text-align: center;
            width: 0px;
            color: rgb(155, 155, 155);
            a{
                color: #63a5f7;
                &:hover{
                    color: #0771f3;
                }
                i{
                    padding: 0 3px;
                }
            }
        }
        input{
            width: 50px;
        }
    }
    .food_b{
        color: rgb(92, 90, 90);
        margin-top:10px ;
        width: 900px;
        display: flex;
        flex-direction:row-reverse;
        font-size: 15px;
        span{
            line-height: 30px;
        }
        a{
            width: 30px;
            height: 30px;
            display: block;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            color: #77787c;
            margin: 0 10px;
            background-color: gainsboro;
            &:hover{
                background-color:$bluecolor;
                color: white;
            }
            span{
                margin: 0 10px;
                display: block;
            };
            input{
                border: 1px #DFE6EC solid;
                border-radius: 5px;
            };
        }
    }
    .food_fade{
        position: fixed;
        z-index: 99;
        background-color: white;
        box-shadow: rgb(177, 174, 174) 0px 0px 8px;
        left: 35%;
        width: 350px;
        height: 320px;
        top:-500px;
        padding:20px 40px;
        border-radius: 5px;
        transition: .5s;
        input{
            margin-bottom: 8px;
            width: 100%;
            height: 30px;
            border: none;
            outline: none;
            border-bottom:gainsboro solid 1px ;
            font-size: 13px;
        }
        .fade{
            width: 20px;
            height: 20px;
            background-color: whitesmoke;
            position: absolute;
            top: 0px;
            text-align: center;
            border-radius: 100px;
            color: gray;
            right: 30px;
            &:hover{
                color: white;
                background-color: rgb(73, 72, 72);
            }
        }
        button{
            margin-top: 20px;
            width: 100%;
            border-radius: 5px;
            color: white;
            font-size: 17px;
            height: 40px;
            border: none;
            cursor: pointer;
            background-color: hsl(209, 78%, 66%);
            &:hover{
                background-color:hsl(209, 93%, 58%) ;
            }
        }
    }
}